<template>
	<div class="main">
		<div class="shop_main">
			<div class="user_info">
				<van-image width="0.5rem" height="0.5rem" fit="cover" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<p class="user_name">{{ sellerName }}</p>
			</div>
			<div class="price_container">
				<span class="shop_name">{{ pname }}</span>
				<span class="shop_tag">
					<span class="before_price">￥</span><span class="price">{{ pprice }}</span>
					<van-tag type="primary" class="mail">包邮</van-tag>
				</span>
			</div>
			<div class="desc">
				{{ pintro }}
			</div>
			<div class="type">
				<span>分类</span> <span>{{ cgname }}</span>
			</div>
			<van-image class="images" width="100%" fit="cover" :src="ppicture" v-if="ppicture" />
		</div>

		<div class="shop_bottom">
			<p class="title">留言 {{ commentCount }}</p>
			<van-cell-group inset class="input_message">
				<van-field v-model="message" :formatter="formatter" rows="2" autosize type="textarea" maxlength="50" placeholder="请输入留言">
					<template #button>
						<van-button size="small" type="danger" :loading="isSendding" loading-type="spinner" @click="toSend">发送</van-button>
					</template>
				</van-field>
			</van-cell-group>
			<div class="message_wall" v-for="(item) in commentList" :key="item.id">
				<div class="message_container">
					<div class="user_info_message">
						<van-image width="0.3rem" height="0.3rem" fit="cover" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
						<p class="user_name_message">{{ item.uname }}</p>
					</div>
					<div class="evaluate">{{ item.comment }}</div>
				</div>
			</div>
		</div>
		<van-action-bar v-if="info.seller!=proxy.$store.state.user.userInfo.id" >
			<van-action-bar-icon icon="cart-o" text="购物车" @click="goTo('/shopcar')" :badge="length" />
			<van-action-bar-button type="warning" text="加入购物车" @click="addShopCar" />
			<van-action-bar-button type="danger" text="立即购买" @click="toBuy" />
		</van-action-bar>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { useStore } from 'vuex';
import { FindById, List } from '@s/products';
import { CommentList, AddInComment } from '@s/comment';
import { AddIn } from '@s/shopcar';
import {checkLogin} from '@/utils'
const { proxy } = getCurrentInstance();
const data = reactive({
	message,
	commentList,
	isSendding: false,
});
const { message, commentList, isSendding } = toRefs(data);
const info = reactive({
	seller: 0,
	pintro: '默认',
	cgname: '默认',
	pprice: 0,
	sellerName: '卖家',
	commentCount: 0,
	pname: '',
	ppicture: '',
	pid,
	length: computed(() => proxy.$store.state.shopcar.listLength),
});
const { seller, pintro, cgname, pprice, sellerName, pname, ppicture, pid, commentCount, length } = toRefs(info);

const formatter = (value) => value.replace(/\r/g, '');
const shopID = proxy.$route.query.id;
CommentList({ pid: shopID }).then((res) => {
	data.commentList = res.data.data;
	info.commentCount = res.data.data.length;
});
getInfo();
async function getInfo() {
	const res = await List({ id: shopID });
	info.pid = res.data.data[0].id;
	info.seller = res.data.data[0].uid;
	info.pintro = res.data.data[0].pintro;
	info.pprice = res.data.data[0].pprice;
	info.cgname = res.data.data[0].cgname;
	info.pname = res.data.data[0].pname;
	info.ppicture = res.data.data[0].ppicture;
	info.sellerName = res.data.data[0].uname;
}
const goTo = (address, param) => {
	proxy.$router.push({
		path: address,
		query: param,
	});
};
const addShopCar = () => {
	if(!checkLogin()){
		return 
	}
	proxy.$Debounce(() => {
		AddIn({ uid: proxy.$store.state.user.userInfo.id, pid: info.pid }).then((res) => {
			if (res.code == 200) {
				const newLength = info.length + 1;
				proxy.$store.commit('shopcar/listLength', newLength);
				proxy.$toast.success('成功添加');
			} else {
				proxy.$toast.fail('在购物车了');
			}
		});
	});
};
const toBuy = () => {
	if(!checkLogin()){
		return 
	}
	proxy.$Debounce(() => {
		AddIn({ uid: proxy.$store.state.user.userInfo.id, pid: info.pid }).then((res) => {
			if (res.code == 200) {
				const newLength = info.length + 1;
				proxy.$store.commit('shopcar/listLength', newLength);
				goTo('/shopcar');
			} else {
				proxy.$toast('点击购物车前往购买');
			}
		});
	});
};

const toSend = () => {
		if(!checkLogin()){
		return 
	}
	proxy.$Debounce(async () => {
		if (!data.message) {
			proxy.$toast.fail('留言不能为空');
			return;
		}
		data.isSendding = true;
		const res = await AddInComment({ uid: proxy.$store.state.user.userInfo.id, pid: shopID, comment: data.message });
		CommentList({ pid: shopID }).then((res) => {
			data.commentList = res.data.data;
			info.commentCount = res.data.data.length;
			data.message = '';
			data.isSendding = false;
		});
	});
};
const emit = defineEmits(['isBar', 'isNav','loading']);
onMounted(() => {
	emit('loading');
	emit('isBar');
	// 初始化活动状态
	emit('isNav');
});
</script>

<style lang="scss" scoped>
.main {
	min-height: 100vh;
	background-color: whitesmoke;
	padding-bottom: 48px;
	.shop_main {
		overflow: hidden;
		padding: 50px 15px 20px;
		background-color: white;
		border-bottom-left-radius: 14px;
		border-bottom-right-radius: 14px;
		.user_info {
			margin: 14px 0px;
			display: flex;
			align-items: center;
			.user_name {
				font-size: 16px;
				font-weight: bold;
				margin-left: 10px;
			}
		}
		.price_container {
			margin: 14px 0px;
			.shop_name {
				font-size: 22px;
				font-weight: bold;
				display: inline-block;
				margin-right: 20px;
			}

			.before_price {
				font-size: 16px;
				color: red;
			}
			.price {
				font-size: 22px;
				color: red;
			}
			.mail {
				margin-left: 10px;
			}
		}
		.desc {
			margin: 14px 0px;
			font-size: 18px;
		}
		.type {
			margin: 14px 0px;
			font-size: 16px;
			span:nth-child(1) {
				color: rgb(165, 165, 165);
			}
			span:nth-child(2) {
				margin-left: 14px;
			}
		}
	}
	.shop_bottom {
		background-color: white;
		padding: 10px 15px;
		border-radius: 14px;
		margin: 14px 0px;
		overflow: hidden;
		.title {
			margin: 14px 0px;
			font-size: 20px;
			font-weight: bold;
		}
		.van-cell-group--inset {
			margin: 0px 0px;
		}
		.van-cell {
			padding: 0px 4px;
		}
		.message_container {
			margin-bottom: 14px;
			.user_info_message {
				display: flex;
				align-items: center;
				.user_name_message {
					font-size: 16px;
					font-weight: bold;
					margin-left: 10px;
				}
			}
			.evaluate {
				margin-left: 40px;
			}
		}
	}
	.tab_bar {
		bottom: -2px;
	}
}
</style>
